<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Point Charts</title>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>
 </head>
    <body>
    <h3>Point Charts</h3>

	<div id="placeholder1" style="width:600px;height:300px;"></div>
	<script id="source" language="javascript" type="text/javascript">
		$(function () {
			var d1 = {
					label:"d1", 
					data:[[2001, 1], [2002, 2], [2003, 3], [2004, 4], [2005, 5]],
					points: { show: true}
				};
			var d2 = {
					label:"d2", 
					data:[[2001, 1], [2002, 5], [2003, 15], [2004, 20], [2005, 25]],
					lines: { show: true, fill: false },
					points: { show: true, fill: false }
				};
			var d3 = {
					label:"d3", 
					data:[[2001, 1], [2002, 10], [2003, 20], [2004, 30], [2005, 40]],
					lines: { show: true, fill: false }
				};
			var options = {
				xaxis: { tickDecimals: 0 },
				yaxis: { min: 0 },
			}
			$.plot($("#placeholder1"), [ d1, d2, d3 ], options);
		});
	</script>

	<div id="placeholder2" style="width:600px;height:300px;"></div>
	<script id="source" language="javascript" type="text/javascript">
		$(function () {
			var data1 = [];
			for (var i = 0; i < 10; i++) {
				data1.push([i, i]);
			}
			var data2 = [];
			for (var i = 0; i < 10; i++) {
				data2.push([i, 10 * i]);
			}
			var data3 = [];
			for (var i = 0; i < 10; i++) {
				data3.push([i, 100 * i]);
			}
			var d1 = {
					label: "d1", 
					data: data1,
					lines: { show: true},
					points: { show: true}
				};
			var d2 = {
					label: "d2", 
					data: data2,
					lines: { show: true},
					points: { show: true}
				};
			var d3 = {
					label:"d3", 
					data: data3,
					bars: { show: true},
					points: { show: true}
				};
			var options = {
				xaxis: { tickDecimals: 0 },
				yaxis: { min: 0 },
			}
			$.plot($("#placeholder2"), [ d1, d2, d3 ], options);
		});
	</script>
 </body>
</html>
